<template>
  <view class="ai-input-multi-wrap" :class="{'ai-composer-input': composer, 'no-border': !showBorder}">
    <textarea class="ai-input-multi"
      :placeholder="placeholder" 
      :focus="focus"
      :maxlength="maxLength"
      :auto-height="authHeight"
      :show-count="false"
      :value="value"
      @blur="handleBlur"
      @input="inputHandler"></textarea>
  </view>
</template>

<script>
  export default {
    name: "ai-input-multi",
    emits: ['update:value', 'change'],
    props: {
      value: String,
      placeholder: {
        type: String,
        default: ""
      },
      showBorder: {
        type: Boolean,
        default: true
      },
      authHeight: {
        type: Boolean,
        default: true
      },
      maxLength: {
        type: Number,
        default: 500
      },
      composer: {
        type: Boolean,
        default: false
      },
    },
    data() {
      return {
        // 'outline' | 'filled' | 'flushed'
        variant: "outline",
        focus: false,
      };
    },
    computed: {
      variantClass: {
        get: function() {
          let v = this.variant
          return `ai-input--${v}`
        }
      }
    },
    methods: {
      inputHandler(e) {
        // const query = uni.createSelectorQuery().in(this)
        // const nodesRef = query.select('.ai-input-wrapper')
        // console.log(nodesRef)
        // nodesRef.fields({rect: true}, d => {
        //   console.log("ddd:", JSON.stringify(d))
        // }).exec()
        const targetValue = e.detail.value
        this.$emit('update:value', targetValue)
        this.$emit('change', targetValue)
      },
      handleBlur() {
        this.$nextTick(() => {
          this.focus = false
        })
      },
      focused() {
        if (!this.focus) {
          this.focus = true
        }
      }
    }
  }
</script>

<style lang="scss">
  @import "@/styles/_var.scss";

  .ai-input-multi-wrap {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    width: $input-width;
    //min-height: $input-min-height;
    margin: $input-margin;
    padding: $input-padding;
    border: $input-border;
    border-radius: $input-border-radius;
    font-family: $input-font-family;
    font-size: $input-font-size;
    background: $input-bg;

    //line-height: $input-line-height;
    &.no-border {
      border: 0
    }

    &:hover {
      outline: none;
      border-color: var(--brand-1);
    }
    
    // textarea {
    //   padding: 4px 0;
    //   line-height: 1.2;
    //   font-size: $font-size-md;
    // }
  }

  .ai-input-multi {
    padding: 4px 0;
    line-height: 1.2;
    font-size: $font-size-md;
  }

  .ai-composer-input {
    overflow-x: hidden;
    max-height: $composer-input-max-height;
    //padding: $composer-input-padding;
    border: $composer-input-border;
    // border-radius: $composer-input-border-radius;
    // background: $composer-input-bg;
    // line-height: 20Px;
    // font-size: 15Px;
    caret-color: $composer-input-caret-color;
    transition: $composer-input-transition;

    &::hover {
      border-color: $input-border;
    }
  }
</style>